<template>
  <div class="tabs">
    <ul>
      <router-link :to="{name: 'Home'}" tag="li" exact>
        <div><i class="icon iconfont icon-shouye"></i></div>
        <div class="tabs-text">首页</div>
      </router-link>
      <router-link :to="{name: 'Gift'}" tag="li">
        <div><i class="icon iconfont icon-liwu"></i></div>
        <div class="tabs-text">礼包</div>
      </router-link>
      <router-link :to="{name: 'Classify'}" tag="li">
        <div><i class="icon iconfont icon-fenlei"></i></div>
        <div class="tabs-text">分类</div>
      </router-link>
      <router-link :to="{name: 'Personal'}" tag="li">
        <div><i class="icon iconfont icon-wode"></i></div>
        <div class="tabs-text">我的</div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Nav'
}
</script>

<style lang="stylus" scoped>
  .tabs
    position: fixed
    bottom: 0
    left: 0
    background-color: #fff
    box-shadow: 0 2px 4px #000
    width: 100%
    & > ul, & > ul > li
      margin: 0
      padding: 0
    ul
      display: table
      width: 100%
      & > li
        text-align: center
        display: table-cell
        padding: .1rem .2rem
        cursor: pointer
        &.router-link-active
          color: #D0021B
        .tabs-text
          margin-top: .08rem
        & > div
          font-size: .24rem
          & > i
            font-size: .54rem
</style>
